<template>
    <div class="person">
        <h2>汽车信息：一辆{{ car.brand }}车，它的价格是：{{ car.price }}万元</h2>
        <button @click="changeCarPrice">修改汽车价格</button>
        <button @click="changeCar">变换汽车</button>
        <br>
        <h2>游戏列表：</h2>
        <ul>
            <!-- 使用 v-for 实现循环， :key表示选定id字段作为主键(:key 相当于v-bind:key，引号中的内容不当做字符串而认为是引用) -->
            <li v-for="g in games" :key="g.id">{{ g.name }}</li>
        </ul>
        <button @click="changeGame">修改第一个游戏</button>
    </div>
</template>

<!-- 嵌套层级较深的对象，推荐使用 reactive -->
<script lang="ts" setup name="Person">
    // 引入reactive，实现响应式数据
    import {reactive} from 'vue'
   
    // 构造对象数据
    let car = reactive({brand:'奔驰', price:100}) // reactive创建对象类型时，底层是Proxy

    function changeCarPrice() {
        car.price += 10; 
    }

    function changeCar() {
        // reactive变换数据时，不能直接赋值
        // car = {brand:'劳斯莱斯', price:200} // 这样写不生效
        // car = reactive({brand:'劳斯莱斯', price:200}) // 这样写不生效
        Object.assign(car, {brand:'劳斯莱斯', price:200})
    }

    // 构造数组数据
    let games = reactive([
        {id:'g01', name:'黑神话-悟空'},
        {id:'g02', name:'战神：诸神黄昏'},
        {id:'g03', name:'金铲铲之战'},
    ])

    function changeGame() {
        games[0].name = '原神'
    }

    // 无论多少层级，reactive都可以把数据变为响应式的
</script>


<style scoped>
.person {
    background-color: skyblue;
    box-shadow: 0 0 10px;
    border-radius: 10px;
    padding: 20px;
}

button {
    margin: 0 5px;
}

li {
    font-size: 20px;
}
</style>